//skin-3 should be used along with "no-skin" because of some overlappings
//<body class="no-skin skin-3">

/* skin 3 */
.skin-3 {
  @body-background: #BBB;
  @navbar-background: #404040;
  @sidebar-background: #DBDBDB;
  @sidebar-border: #A4C6DD;

  @nav-item-background: #E3E3E3;
  @nav-item-color: #5A5A5A;
  @nav-item-border: #F2F2F2;

  //different states
  @nav-item-color-hover: mix(#1963AA, #4D96CB);
  @nav-item-background-hover: #FFF;

  @nav-item-color-open: @nav-item-color-hover;
  @nav-item-background-open: #F8F8F8;

  @nav-item-background-active: lighten(saturate(#EEF8FF, 10%), 1%);
  @nav-item-color-active: #4D96CB;

  @nav-item-border-active: #A4C6DD;
  @nav-item-border-hover: desaturate(darken(@nav-item-border-active, 5%), 5%);

  //submenu colors
  @submenu-background: #FFF;
  @submenu-border: #E5E5E5;

  @submenu-background-active: #FFF; //darken(@submenu-background-active , 2.5%);
  @submenu-border-active: #E5E5E5;

  @submenu-item-color: #616161;
  @submenu-item-border: #E4E4E4;

  @submenu-item-background: transparent;
  @submenu-item-background-hover: #F1F5F9;
  @submenu-item-background-active: #F5F7FA;

  @breadcrumbs-background: #E7F2F8;

  @sidebar-toggle-icon-color: #FFF;
  @sidebar-toggle-background: #D0D0D0;
  @shortcuts-background: @sidebar-background;
  @shortcuts-border: @nav-item-border;

  background-color: @body-background;

  //add a lined-paper like effect
  .main-container {
    &:before {
      background: #FFF;

      background: -moz-linear-gradient(top, #EEF5FA 0%, #FFF 8%) 0 4px;
      background: -webkit-gradient(linear, 0 0, 0 100%, from(#EEF5FA), color-stop(4%, #FFF)) 0 4px;
      background: -webkit-linear-gradient(top, #EEF5FA 0%, #FFF 8%) 0 4px;
      background: -o-linear-gradient(top, #EEF5FA 0%, #FFF 8%) 0 4px;
      background: -ms-linear-gradient(top, #EEF5FA 0%, #FFF 8%) 0 4px;
      background: linear-gradient(top, #EEF5FA 0%, #FFF 8%) 0 4px;

      -moz-background-size: 100% 26px;
      -webkit-background-size: 100% 26px;
      -o-background-size: 100% 26px;
      -ms-background-size: 100% 26px;
      background-size: 100% 26px;
    }

    @media (min-width: @screen-sm-min) {
      &.container:before {
        .box-shadow(~"0 0 0 1px rgba(50, 100, 200, 0.1)");
      }
    }
  }

  .navbar {
    background: @navbar-background;
  }

  .sidebar {
    background-color: @sidebar-background;

    border-style: solid;
    border-width: 0 1px 0 0;
    border-color: @sidebar-border;
  }

  .nav-list > li {
    border-color: @nav-item-border; // !important;
    > a {
      background-color: @nav-item-background;
      color: @nav-item-color;

      > .arrow {
        color: inherit;
      }

      &:focus {
        background-color: lighten(@nav-item-background, 2%);
        color: @nav-item-color;
      }
    }

    &:hover {
      border-color: @nav-item-border-hover !important;

      & + li {
        border-top-color: @nav-item-border-hover !important;
      }
    }

    &.open {
      border-color: @nav-item-border-hover !important;

      & + li {
        border-top-color: @nav-item-border-hover !important;
      }
    }

    &.active {
      border-color: @nav-item-border-active !important;

      & + li {
        border-color: @nav-item-border-active !important;

        &:last-child {
          border-bottom-color: @nav-item-border !important;

          &:hover {
            border-bottom-color: @nav-item-border-hover !important;
          }
        }
      }
    }

    &:hover > a {
      background-color: @nav-item-background-hover;
      color: @nav-item-color-hover;
    }

    &.open > a, &.open:hover > a {
      color: @nav-item-color-open;
      background-color: @nav-item-background-open;
    }

    &.open > a > .arrow {
      color: inherit;
    }

    &.active > a, &.active.highlight > a {
      background-color: @nav-item-background-active !important;
      color: @nav-item-color-active !important;
    }
  }

  .nav-list > li:hover:before, .nav-list > li.open:before {
    display: block;
    background-color: saturate(lighten(mix(#4D96CB, #444), 10%), 10%) !important;
  }

  .nav-list > li.active:before {
    display: block;
    background-color: #4D96CB !important;
  }

  .page-content {
    background-color: transparent;
    //so that .main-content's background can be seen
  }

  .infobox-container .infobox:not(.infobox-dark) {
    border-style: solid;
    background-color: transparent;
  }

  .nav-list > li.active:after {
    display: none;
  }

  .nav-list li.active > a:after {
    border-right-color: #FFF;
    -moz-border-right-colors: #FFF;

    //border-width: 16px 10px;
    //top: 3px;

    border-width: 12px 8px;
    top: 7px;

    right: -1px;
  }

  .nav-list li.active > a:before {
    display: block;
    content: "";

    position: absolute;

    background-color: transparent;

    border-style: solid;
    border-color: transparent;

    border-right-color: darken(@sidebar-border, 5%);
    -moz-border-right-colors: darken(@sidebar-border, 5%);

    //border-width: 16px 10px;
    //top: 3px;
    right: 0;

    border-width: 12px 8px;
    top: 7px;
  }

  .nav-list > li.active > .submenu li.active > a {
    &:before, &:after {
      //top: 6px;
      top: 4px;
    }
  }

  .nav-list li.active.open > a:before {
    display: none;
  }

  .nav-list li.highlight.active.open > a:before {
    display: block;
  }

  .nav-list li.active:not(.open) li.active > a:before {
    //hide the active caret when parent submenu is being closed (not open)
    display: none !important;
  }

  .nav-list > li.highlight.active > a:after {
    border-left-color: @nav-item-background-active;
    -moz-border-left-colors: @nav-item-background-active;
  }

  .nav-list > li.highlight.active > a:before {
    border-left-color: darken(@sidebar-border, 5%);
    -moz-border-left-colors: darken(@sidebar-border, 5%);
  }

  .nav-list li > .arrow:before {
    border-right-color: darken(#A4C6DD, 10%);
    -moz-border-right-colors: darken(#A4C6DD, 10%);
  }

  .nav-list > li .submenu > li {
    &.active:not(.open) > a {
      background-color: @submenu-item-background-active;

      &:hover {
        background-color: @submenu-item-background-hover;
      }
    }
  }

  @media only screen and (max-width: @grid-float-breakpoint-max) {
    .sidebar.responsive .nav-list > li.active.open > a:after {
      display: none;
    }
  }

  .enable_submenu_hover_skin_3() when (@enable-submenu-hover = true) {
    @media only screen and (min-width: @screen-hover-menu) {
      .nav-list li.hover > .submenu {
        border-color: darken(@sidebar-border, 3%);
      }
    }
    //@media
    @media only screen and (min-width: max(@screen-hover-menu, @grid-float-breakpoint)) {
      .nav-list li.hover {
        &.active > a:before {
          display: block;
        }

        .submenu > li.active > a:before {
          display: none;
        }
      }
    }
  }
  .enable_submenu_hover_skin_3();

  .menu_min_skin_3() {
    .nav-list > li > a > .menu-text {
      background-color: lighten(#EDF3F7, 1%);
      border-color: #A4C6DD;
    }
    .nav-list > li.active > a > .menu-text {
      background-color: #EDF3F7;
    }
    .nav-list > li > .submenu {
      border-color: #A4C6DD;
      border-top-color: #C9DAE5;
    }

    .nav-list > li.active > .arrow:before {
      border-right-color: #709FBF;
      -moz-border-right-colors: #709FBF;
    }
    .nav-list > li > .arrow:after {
      border-right-color: #EDF3F7;
      -moz-border-right-colors: #EDF3F7;
    }

    .nav-list li.active > a {
      &:after, &:before {
        display: none;
      }
    }
    .nav-list > li.active > a {
      &:after, &:before {
        display: block;
        border-width: 9px 7px;
        top: 10px;
      }
    }

    .nav-list > li.active.highlight > a {
      &:after, &:before {
        border-width: 20px 0 21px 10px;
        top: -1px;
      }
    }
    .nav-list > li.active:hover > a, .nav-list > li.active.hover-show > a {
      &:after, &:before {
        display: none;
      }
    }

    .sidebar-shortcuts-large {
      background-color: #F5F5F5;
    }
  }

  .enable_sidebar_collapse_skin_3() when (@enable-sidebar-collapse = true) {
    .sidebar.menu-min {
      .menu_min_skin_3();

      .enable_responsive_menu_tmp_in1() when (@enable-responsive-menu = true) {
        @media only screen and (max-width: @grid-float-breakpoint-max) {
          &.responsive .nav-list > li.active > a {
            &:after, &:before {
              display: none;
            }
          }
        }
      }
      .enable_responsive_menu_tmp_in1();
    }
  }
  .enable_sidebar_collapse_skin_3();

  @media only screen and (max-width: @grid-float-breakpoint-max) {
    .sidebar.responsive {
      border-bottom-width: 1px !important;

      .nav-list > li.active.open > a:after {
        display: none;
      }

      .nav-list > li.active.highlight > a:after,
      .nav-list > li.active.highlight > a:before {
        display: block;
      }
    }

    .sidebar.navbar-collapse {
      border-bottom-color: #A4C6DD;
    }

    .nav-list li.active > a {
      &:after, &:before {
        display: none;
      }
    }

    .enable_minimized_responsive_menu_skin_3() when (@enable-minimized-responsive-menu = true) {
      .sidebar.responsive-min {
        .menu_min_skin_3();
      }
      .sidebar.responsive-max {
        border-width: 0 1px 1px 0;

        .nav-list li.hover.active > a:before {
          display: none;
        }

        .nav-list > li.active.open > a:after {
          display: none;
        }

        .nav-list > li.active.highlight > a:after,
        .nav-list > li.active.highlight > a:before {
          display: block;
        }
      }
    }
    .enable_minimized_responsive_menu_skin_3();


    .sidebar.navbar-collapse .sidebar-shortcuts-large {
      background-color: transparent;
    }
  }

  //extra
  .sidebar-shortcuts, .sidebar-shortcuts-mini {
    background-color: @shortcuts-background;
    //border-color: @shortcuts-border;
  }

  .sidebar-shortcuts-large > .btn:focus {
    outline: none;
  }

  .sidebar > .nav-search {
    background-color: @shortcuts-background;
    //border-color: @shortcuts-border;
  }

  .sidebar-toggle {
    background-color: @sidebar-toggle-background;
    border-color: @nav-item-border;
    //border-width: 0 0 1px;

    &:before {
      border-color: @nav-item-border;
    }

    > .@{icon} {
      background-color: @sidebar-toggle-icon-color;
      background-color: #FFF;
      border-color: #999;
      color: #999;
    }
  }

  .sidebar-scroll .nav-wrap-up + .sidebar-toggle:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -1px;
    border-right: 1px solid @sidebar-border; //to cover the active item caret when scrolling
  }

  .enable_collapsible_responsive_menu_skin_3_tmpp() when (@enable-collapsible-responsive-menu = true) {
    @media only screen and (max-width: @grid-float-breakpoint-max) {
      .sidebar.navbar-collapse {
        .nav-list > li:before {
          height: @nav-item-height + 4 !important;
        }

        .sidebar-shortcuts {
          padding: 0 0 3px !important;
        }
      }
    }
  }
  .enable_collapsible_responsive_menu_skin_3_tmpp();

  @media only screen and (min-width: @screen-hover-menu) {
    .nav-list > li.active.hover {
      &:hover, &.hover-show {
        > a.dropdown-toggle:after, > a.dropdown-toggle:before {
          display: none;
        }
      }
    }
  }

  .enable_old_menu_toggle_button_skin_3() when (@enable-old-menu-toggle-button = true) {
    .main-container .menu-toggler {
      background-color: #62A8D1;
      color: #FFF;

      &:before, &:after {
        border-color: #FFF;
      }

      > .toggler-text {
        border-top-color: #62A8D1;
        -moz-border-top-colors: #62A8D1;

        &:after {
          color: #FFF;
        }
      }
    }
  }
  .enable_old_menu_toggle_button_skin_3();

  .navbar .navbar-toggle {
    //box-shadow: none;
    //border-radius: 0;
    border-color: rgba(255, 255, 255, 0.15);

    transition: background-color 0.1s ease 0s;
    background-color: #648CAE;

    &:focus {
      background-color: #648CAE;
      border-color: rgba(255, 255, 255, 0.15);
    }

    &:hover {
      background-color: darken(#648CAE, 4%);
      border-color: rgba(255, 255, 255, 0.15);
    }

    &.display, &[data-toggle=collapse]:not(.collapsed) {
      background-color: darken(#648CAE, 8%);
      border-color: rgba(255, 255, 255, 0.3);
    }
  }

  .enable_breadcrumbs_skin_3() when (@enable-breadcrumbs = true) {
    .breadcrumbs {
      border-width: 0;
      background-color: @breadcrumbs-background;
      border-radius: 4px;

      margin: 8px 8px 0;
    }

    @media only screen and (max-width: @grid-float-breakpoint-max) {
      .breadcrumbs {
        margin: 5px 5px 0;
      }

      .menu-toggler + .sidebar.responsive + .main-content .breadcrumbs {
        margin: 0;
        border-radius: 0;
      }
    }

    .enable_fixed_breadcrumbs_skin_3() when (@enable-fixed-breadcrumbs = true) {
      @media (min-width: @screen-fixed-breadcrumbs) {
        .breadcrumbs.breadcrumbs-fixed + .page-content {
          padding-top: @page-content-padding-top + @breadcrumb-height + 8;
        }
      }
      @media (min-width: @screen-fixed-breadcrumbs) and (max-width: @grid-float-breakpoint-max) {
        .breadcrumbs.breadcrumbs-fixed + .page-content {
          padding-top: @page-content-padding-top + @breadcrumb-height + 5;
        }

        .menu-toggler + .sidebar.reponsive + .main-content .breadcrumbs.breadcrumbs-fixed + .page-content {
          padding-top: @page-content-padding-top + @breadcrumb-height;
        }
      }

      .enable_container_breadcrumbs_skin_3() when (@enable-breadcrumbs = true) {
        //because breadcrumbs has 8px margin on left and right
        .container.main-container {
          @media (min-width: max(@screen-sm-min, @screen-fixed-breadcrumbs, @screen-compact-menu)) and (max-width: @grid-float-breakpoint-max) {
            .sidebar.compact + .main-content .breadcrumbs-fixed {
              width: @container-sm - 10;
            }
          }
          @media (min-width: max(@screen-sm-min, @screen-fixed-breadcrumbs)) and (max-width: @grid-float-breakpoint-max) {
            .breadcrumbs-fixed {
              width: @container-sm - 10;
            }

            .sidebar.menu-min + .main-content .breadcrumbs-fixed {
              width: @container-sm - 10;
            }

            .sidebar.responsive-min + .main-content .breadcrumbs-fixed {
              width: @container-sm - @sidebar-min-width - 10;
            }
          }
          @media (min-width: max(@screen-compact-menu, @screen-md-min)) {
            .sidebar.compact + .main-content .breadcrumbs-fixed {
              width: @container-md - @sidebar-compact-width - 16;
            }
          }
          @media (min-width: @screen-md-min) {
            .breadcrumbs-fixed {
              width: @container-md;
            }

            .sidebar + .main-content .breadcrumbs-fixed {
              width: @container-md - @sidebar-width - 16;
            }

            .sidebar.menu-min + .main-content .breadcrumbs-fixed {
              width: @container-md - @sidebar-min-width - 16;
            }
          }

          @media (min-width: max(@screen-compact-menu, @screen-lg-min)) {
            .sidebar.compact + .main-content .breadcrumbs-fixed {
              width: @container-lg - @sidebar-compact-width - 16;
            }
          }

          @media (min-width: @screen-lg-min) {
            .breadcrumbs-fixed {
              width: @container-lg - 16;
            }

            .sidebar + .main-content .breadcrumbs-fixed {
              width: @container-lg - @sidebar-width - 16;
            }

            .sidebar.menu-min + .main-content .breadcrumbs-fixed {
              width: @container-lg - @sidebar-min-width - 16;
            }
          }
        }
      }
      .enable_container_breadcrumbs_skin_3();
    }
    .enable_fixed_breadcrumbs_skin_3();

  }
  .enable_breadcrumbs_skin_3();

  @media only screen and (max-width: @grid-float-breakpoint-max) {
    .nav-list li.active > a:before, .nav-list li.active > a:after {
      display: none;
    }
  }

  .sidebar-shortcuts-large > .btn {
    line-height: 26px;
    border-width: 1px;
  }

  .sidebar-shortcuts-mini {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 1px;
  }

  .sidebar-shortcuts-mini > .btn {
    border-width: 1px;
    opacity: 1;
    padding: 7px;
    margin: 1px 1px 0 0;
  }

  .enable_horizontal_menu_skin_3() when (@enable-horizontal-menu = true) {
    @media only screen and (min-width: @grid-float-breakpoint) {
      //top menu
      .sidebar.h-sidebar {
        background-color: @nav-item-background;

        &:before {
          background-color: #CBD0D6;
          border-bottom-width: 0;
        }

        .sidebar-shortcuts-mini > .btn {
          padding: 8px;
        }

        .sidebar-shortcuts-large {
          background-color: #FFF;
          line-height: 36px;
        }

        + .main-content .breadcrumbs {
          border-color: desaturate(darken(@breadcrumbs-background, 5%), 5%);
          top: 2px;
        }

        .nav-list > li.hover > .submenu {
          //border-color: #CCC;
          border-color: #A4C6DD;
        }

        .nav-list > li {
          border-color: @nav-item-border;

          &:hover, &:hover + li {
            border-left-color: @nav-item-border-hover;
          }

          &:last-child:hover {
            border-right-color: @nav-item-border-hover;
          }

          &.active, &.active + li, &:hover + li.active {
            border-left-color: @nav-item-border-active;
          }

          &.active:last-child {
            border-right-color: @nav-item-border-active;
          }
        }

        .nav-list > li.active > a:after {
          left: 0;
          top: auto;
          right: auto;
          bottom: -2px;

          left: 50%;
          margin-left: -7px;

          border-color: transparent;
          -moz-border-right-colors: none;

          border-width: 8px 7px !important;
          border-bottom-color: #FFF;
          -moz-border-bottom-colors: #FFF;
        }

        .nav-list > li.active > a:before {
          display: block;
          left: 0;
          top: auto;
          right: auto;

          bottom: -1px;

          left: 50%;
          margin-left: -8px !important;

          border-width: 8px !important;

          border-color: transparent;
          -moz-border-right-colors: none;

          border-bottom-color: lighten(#4D96CB, 10%);
          -moz-border-bottom-colors: lighten(#4D96CB, 10%);
        }

        .nav-list > li.hover {
          > .arrow:before {
            -moz-border-right-colors: none;
            border-right-color: transparent;

            border-bottom-color: darken(#A4C6DD, 10%);
            -moz-border-bottom-colors: darken(#A4C6DD, 10%);
          }
        }

        &.menu-min {
          .sidebar-shortcuts {
            max-width: 52px;
            padding-left: 2px;
            padding-right: 2px;
          }

          .sidebar-shortcuts-mini > .btn {
            padding: 7px;
          }

          .nav-list > li.hover > .submenu {
            border-top-color: #C9DAE5;
          }

          .nav-list > li.active > a > .menu-text {
            border-left-color: #A4C6DD;
          }

          .nav-list > li > .arrow:after {
            -moz-border-bottom-colors: #EDF3F7;
            border-bottom-color: #EDF3F7;
          }
        }

      }
    }
    //@media
  }
  .enable_horizontal_menu_skin_3();

  .sidebar-scroll {
    .sidebar-shortcuts {
      //border-bottom: 1px solid desaturate(lighten(@nav-item-border-active , 5%) , 5%);
      border-bottom-color: 1px solid #99B6C9;
    }

    .sidebar-toggle {
      //border-top: 1px solid desaturate(lighten(@nav-item-border-active , 5%) , 5%);
      border-top-color: #99B6C9;
    }

  }

  @media only screen and (min-width: @screen-sm-min) and (max-width: @grid-float-breakpoint-max) {
    .navbar.navbar-collapse {
      background-color: transparent;

      &:before, .navbar-container {
        background: @navbar-background;
      }
    }
  }

  //disabled state
  .nav-list > li.disabled:before {
    display: none !important;
  }

}

//.skin-3
